
// 购物车
$(function () {
  $("#cart").hover(function () {
    $("#cart-box").stop().slideDown("fast");
  }, function () {
    $("#cart-box").stop().slideUp("fast");
  });

  $("#showmenu li").hover(function () {
    $(this).find("#hide-menu").stop().slideDown();
    $("#hide-menu li:last-child img").addClass('no-border');
  }, function () {
    $(this).find("#hide-menu").css('display', 'none');
  });
});

// 隐藏菜单的切换
$(function () {
  $("#lf-menu li").hover(function () {
    $(this).find(".hide-rt-menu").css("display", "block");
  }, function () {
    $(this).find(".hide-rt-menu").css("display", "none");
  });
});

// 轮播图
// $(".carousel-pic").
(function () {
  var idx = 0;
  var timer;
  $(".carousel .ctrl-btn .lf-btn").click(function () {
    idx--;
    if (idx < 0) {
      idx = 4;
    }
    move();
    clearInterval(timer); //这行本来没有
    test(); //这行也是
  });

  $(".carousel .ctrl-btn .rt-btn").click(function () {
    idx++;
    if (idx > 4) {
      idx = 0;
    }
    move();
    clearInterval(timer); //这行本来没有
    test(); //这行也是
  });

  var _loop = function _loop(i) {
    $(".dot-btn li").eq(i).click(function () {
      idx = i;
      move();
      clearInterval(timer); //这行本来没有
      test(); //这行也是
    });
  };

  for (var i = 0; i <= 4; i++) {
    _loop(i);
  }

  /*没有test函数就可以运动了，只要留住里面的timer即可，click里面的clearinterval(timer)和test()可以不用写，这样写的目的是当鼠标点击的时候会先停下计时器，然后重新再计时*/
  function test() {
    timer = setInterval(function () {
      idx++;
      if (idx > 4) {
        idx = 0;
      }
      move();
    }, 2500);
  }
  test();

  function move() {
    $(".carousel-pic a img").eq(idx).parent().siblings().children().removeClass('active');
    $(".carousel-pic a img").eq(idx).addClass('active');
    $(".dot-btn li").eq(idx).siblings().removeClass('active');
    $(".dot-btn li").eq(idx).addClass('active');
  }
})();

// 小米闪购滚动
$(function () {
  var tabLf = $('#tab-lf-btn'),
      tabRt = $('#tab-rt-btn'),
      tab = $('.slidepic'),
      picList = $('.slidepic li'),
      page = Math.floor(picList.length / 4),
      i = 0;

  tabLf.click(function () {
    i--;
    computed();
    if (i < 0) {
      i = 0;
    } else {
      tab.stop().animate({
        left: -996 * i
      }, 400);
    }
  });

  tabRt.click(function () {
    i++;
    computed();
    if (i > page) {
      i = page;
    } else {
      tab.stop().animate({
        left: -996 * i
      }, 400);
    }
  });

  function computed() {
    if (i <= 0) {
      tabLf.addClass('none');
    } else if (i >= page) {
      tabRt.addClass('none');
    } else {
      tabLf.removeClass('none');
      tabRt.removeClass('none');
    }
  }
  computed();
});
//选项卡
$(function () {
  $('#tab-nav a').mouseover(function () {
    $(this).addClass('acti');
    $(this).siblings().removeClass('acti');
    //index()用法可以得到下标
    var index = $(this).index();
    $('.hide').removeClass('acti');
    $('.hide').eq(index).addClass('acti');
  });
});

//计时器
$(function () {
  var timer = void 0,
      timerIndex = -1,
      timerArray = [],
      List = document.getElementsByClassName('cutOff-time');
  spanList = Array.apply(null, List);
  timerArray.push(updateTimer);
  // 初始化时钟并启动
  timer = setInterval(function () {
    timerIndex += 1;
    timerIndex = timerIndex % 100;
    for (var i = 0; i < timerArray.length; i++) {
      timerArray[i](); // 调用数组中的回调函数
    }
  }, 200);

  // 更新当前时间与秒杀结束时间差的span标签
  function updateTimer() {
    if (timerIndex % 5 != 0) {
      return;
    }
    //满一秒钟了，更新
    var endDate = new Date(loadData.ms.endTime);
    var startDate = Date.now();
    var strArr = getTime(endDate - startDate);
    spanList.forEach(function (item, index) {
      item.innerHTML = strArr[index];
    });
  }
  // var time = new Date(temp.replace(/-/g,"/")).getTime();
  function getTime(ms) {
    if (isNaN(ms) || ms < 0) {
      console.log('传入的时间错误');
    } else {
      var hours = parseInt(ms / 1000 / 60 / 60);
      var minutes = parseInt(ms / 1000 / 60) % 60;
      var seconds = parseInt(ms / 1000) % 60;
      var hourStr = '0' + hours;
      hourStr = hourStr.slice(-2);
      var minuteStr = '0' + minutes;
      minuteStr = minuteStr.slice(-2);
      var secondStr = '0' + seconds;
      secondStr = secondStr.slice(-2);
      var timeStr = hourStr + ',' + minuteStr + ',' + secondStr;
      timeStr = timeStr.split(',');
      return timeStr;
    }
  }
  var loadData = {
    ms: {
      endTime: '2019-5-11 7:00:00'
    }
  };
});

// tabBox切换组件
$(function () {
  function TabBox(tab) {
    var _this = this;
    this.tab = tab;
    this.color = tab.attr('color');
    this.tab.css('border-top', "1px solid " + this.color);
    this.tab.find('.tab-title').css('color', "" + this.color);
    // console.log(this.color);
    this.carouList = this.tab.find('.carousel');
    this.infoList = this.tab.find('.tab-body');
    this.dotList = this.tab.find('.tab-dot div');
    this.idx = 0;

    this.tab.find('.left').click(function () {
      _this.idx--;
      if (_this.idx < 0) {
        _this.idx = 0;
      }
      _this.btnCtrl(_this.idx);
    });

    this.tab.find('.right').click(function () {
      _this.idx++;
      if (_this.idx > _this.carouList.length - 1) {
        _this.idx = _this.carouList.length - 1;
      }
      _this.btnCtrl(_this.idx);
    });

    this.dotList.each(function (index, item) {
      item.onclick = function () {
        _this.dotCtrl(index);
        _this.btnCtrl(index);
      };
    });
  }
  TabBox.prototype = {
    constructor: 'TabBox',
    btnCtrl: function btnCtrl(num) {
      this.infoList.stop().animate({ left: -296 * num }, 400);
      this.dotList.eq(num).addClass('active').siblings().removeClass('active');
    },
    dotCtrl: function dotCtrl(num) {
      this.idx = num;
      this.dotList.eq(num).addClass('active').siblings().removeClass('active');
    }
  };
  TabBox.init = function (tabs) {
    var _this = this;
    tabs.each(function () {
      new _this($(this));
    });
  };
  TabBox.init($('.tabBox'));
});

//返回最上层
$(function () {
  var throttle = true;
  document.addEventListener('scroll', function () {
    if (!throttle) {
      return;
    }
    throttle = false;
    setTimeout(function () {
      throttle = true;
      //滚动条滚到的时候，元素显示
      /* if(document.documentElement.scrollTop>fater.offsetTop-document.documentElement.clientHeight){
            $('#father').css({'opacity':'1','transform':'translateX(-10px)'})
       }*/
      if (document.documentElement.scrollTop > $('.main')[0].offsetTop) {
        $('i.fa-hand-o-up').css('display', 'block');
      } else {
        $('i.fa-hand-o-up').css('display', 'none');
      }
    }, 300);
  });
  $('i.fa-hand-o-up').on('click', function (e) {
    e.preventDefault();
    $("html,body").animate({ scrollTop: "0px" }, 800);
  });
});

//视频区
$(function () {
  var videoList = [0, "https://v.mifile.cn/b2c-mimall-media/c2cb94c9485243e1767d43268fb90820.mp4", "https://v.mifile.cn/b2c-mimall-media/ed921294fb62caf889d40502f5b38147.mp4", "https://v.mifile.cn/b2c-mimall-media/53fc775dd6b29ecd8df3e2ea35129766.mp4", "https://v.mifile.cn/b2c-mimall-media/69f7b9881f4ed7123f0d473dcd44d621.mp4"];
  var myVideo = document.getElementsByTagName('video')[0],
      videoArea = $('#videoArea'),
      videoSrc = $('#videoSrc');
  $('.video')[0].addEventListener('click', function (e) {
    var ev = e.target;
    var index = $(ev).parent('section').index();
    var title = $(ev).parent('section').find('p.title').html();
    //用户选中img或i标签，就显示遮罩区域，并播放视频
    if (ev.tagName == 'IMG' || ev.tagName == 'I') {
      videoArea.addClass('show');
      $('.modal').css('display', 'block');
      videoSrc.attr("src", videoList[index]).attr('autoplay', 'true');
      videoArea.find('h3.title')[0].innerText = title;
    } else if (ev.className == 'close') {
      videoArea.removeClass('show');
      $('.modal').css('display', 'none');
      myVideo.pause();
    }
  });
});